<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form divClass" v-if="headerShow">
                <div>
                    <!-- <a-form size="small" :model="pageData" layout="inline">
                        <a-form-item label="布种分类">
                            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                                v-model="pageData.dropDownData" @press-enter="huiche" />
                        </a-form-item>
                    </a-form> -->
                </div>
                <div class="my-tool-bar">
                    <Toolbar :items="['查询', '新增', '删除']" @add="addHandler" @del="deleteHandler" @select="selectHandler">
                    </Toolbar>
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
        </template>
        <template #pageTabel>
              <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height: calc(100% - 45px);" :defaultColDef="defaultColDef"
                class='ag-theme-alpine' :rowData="table.dataList" :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :total="total" show-total show-jumper show-page-size @change="PageSize" @page-size-change="change1"
            style="justify-content: center" :page-size="pagination.pageSize" :current="pagination.page"
            :page-size-options="pagingList1" />
        </template>
        
        <a-drawer :drawer-style="{ 'zIndex': 9999 }" :mask-closable="false" :width="400" :visible="pageData.showAdd"
            unmountOnClose @ok="sideOk" @cancel="pageData.showAdd = false" cancel-text='关闭' ok-text='保存'>
            <template #title>
                {{ pageData.sideTitle }}
            </template>
            <div>
                <a-form ref="formRef" layout="horizontal" :model="dataForm">

                    <a-form-item label="路线名称" label-col-flex="80px">
                        <a-input class="bacClass" v-model="dataForm.routeName" />
                    </a-form-item>
                    <a-form-item label="超大型单价" label-col-flex="80px">
                        <a-input-number class="bacClass" v-model="dataForm.superBigModelPrice" />
                    </a-form-item>
                    <a-form-item label="特大型单价" label-col-flex="80px">
                        <a-input-number class="bacClass" v-model="dataForm.specialBigModelPrice" />
                    </a-form-item>
                    <a-form-item label="大型单价" label-col-flex="80px">
                        <a-input-number class="bacClass" v-model="dataForm.bigModelPrice" />
                    </a-form-item>
                    <a-form-item label="中型单价" label-col-flex="80px">
                        <a-input-number class="bacClass" v-model="dataForm.middleModelPrice" />
                    </a-form-item>
                    <a-form-item label="小型单价" label-col-flex="80px">
                        <a-input-number class="bacClass" v-model="dataForm.smallModelPrice" />
                    </a-form-item>
                </a-form>
            </div>
        </a-drawer>
    </pageTabelLayout>
</template>

<script lang="ts" setup>
import { post, get } from "@/api/http";
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { ref, reactive, onMounted, onActivated, onUnmounted } from "vue";
import Toolbar from "@/components/Toolbar.vue";
import { Form, Message, Modal, Pagination } from "@arco-design/web-vue";
import { FormInstance } from "@arco-design/web-vue/es/form";
import emitter from "@/hooks/useEventBus";
import validate from "@/hooks/useValidate";
import axios from "axios";
import { pagingList } from "@/api/paging";

import { localeText } from '@/api/aggridZw'

interface ClothSet {
    id: any;
    routeName: any
    superBigModelPrice: any
    specialBigModelPrice: any
    bigModelPrice: any
    middleModelPrice: any
    smallModelPrice: any


    createName: string | undefined;
    createTime: string | undefined;
    updateName: string | undefined;
    updateTime: string | undefined;
    deleteState: any
}
const headerShow = ref<boolean>(true)
const pagingList1: any = ref(pagingList)
//查询
const scrollbar = ref(true)
function doRefresh() {

    pageData.pageLoading = true

    post({
        url: "/dwPc/TransportRoutePiece/getPage",
        data: {
            page: pagination.page,
            size: pagination.pageSize,
            deleteState: 0,
        },
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data.list);
                gridOption.value.setRowData(data.list)
                total.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}

const { selectedRowKeys, onSelectionChange } = useRowSelection();
const pagination = usePagination(doRefresh);
const table = useTable();
const rowKey = useRowKey("id");
//检验表单是否含有中文的方法
const hasChiese = validate.includeChinese;
const tableColumns = useTableColumn([
    {
        title: "路线编号",
        key: "routeCode",
        dataIndex: "routeCode",
        width: 350
    },
    {
        title: "路线名称",
        key: "routeName",
        dataIndex: "routeName",
        width: 150
    },
    {
        title: "超大型单价",
        key: "superBigModelPrice",
        dataIndex: "superBigModelPrice",
        width: 150
    },
    {
        title: "特大型单价",
        key: "specialBigModelPrice",
        dataIndex: "specialBigModelPrice",
        width: 150
    },
    {
        title: "大型单价",
        key: "bigModelPrice",
        dataIndex: "bigModelPrice",
        width: 150
    },
    {
        title: "中型单价",
        key: "middleModelPrice",
        dataIndex: "middleModelPrice",
        width: 150
    },
    {
        title: "小型单价",
        key: "smallModelPrice",
        dataIndex: "smallModelPrice",
        width: 150
    },
    {
        title: "创建人",
        key: "createName",
        dataIndex: "createName",
        width: 150
    },
    {
        title: "创建时间",
        key: "createTime",
        dataIndex: "createTime",
        width: 150
    },
    {
        title: "最后修改人",
        key: "updateName",
        dataIndex: "updateName",
        width: 150
    },
    {
        title: "最后修改时间",
        key: "updateTime",
        dataIndex: "updateTime",
        width: 150
    },

    {
        title: "操作",
        key: "id",
        dataIndex: "id",
        slotName: "act",
        width: 150, fixed: 'right'
    },
]);
const pageData = reactive<{
    clothList: ClothSet[]
    showAdd: boolean
    sideTitle: string
    dropDownData: any
    pageLoading: boolean,
    theight: number,
    tablediv: any,
    rHeight: number | undefined
    nameList: any[]
}>({
    clothList: [],
    showAdd: false,
    sideTitle: "新增运输路线计件单价",
    dropDownData: "",
    pageLoading: false,
    theight: 0,
    tablediv: null,
    rHeight: 0,
    nameList: [],
});
//下拉框得到焦点
const focusSel = () => {
    selCxAll({ shade: "" })
}
//下拉数据
const options = ref<any>(pageData.nameList);
const loading = ref(false);
const handleSearch = (value: any) => {
    if (value) {
        const ob = { shade: value }
        loading.value = true;
        selCxAll(ob);
        options.value = pageData.nameList;
        loading.value = false;
    } else {
        options.value = []
    }
};

//下拉框查询
function selCxAll(val: any) {
    post({
        url: "/pdm/shade/getFieldValue",
        data: val
    }).then(({ data, code }: any) => {
        if (code === 200) {
            pageData.nameList = data;
        } else {
            Message.error({
                content: "查询失败！",
                duration: 5000,
            });
        }
    });
}

onMounted(() => {
    // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
    doRefresh();
    // selCxAll({});
    // 切换tap到本页面执行的方法
    emitter.on("UnitPriceSetting", () => {
        // selCxAll({});
        doRefresh();
    });
});
//查询
const selectHandler = () => {
    pagination.page = 1
    doRefresh();
}
const queryData = reactive({
    clothType: "",
});
const addHandler = () => {
    for (var key in dataForm) {
        if (key === "id") {
            dataForm[key] = null;
        } else {
            dataForm[key] = "";
        }

    }
    pageData.showAdd = true;
    pageData.sideTitle = "新增运输路线计件单价";
};
const dataForm = reactive<ClothSet>({
    id: null,
    routeName: null,
    superBigModelPrice: null,
    specialBigModelPrice: '',
    bigModelPrice: '',
    middleModelPrice: '',
    smallModelPrice: '',



    updateTime: "",
    updateName: "",
    createName: "",
    createTime: "",
    deleteState: 0
});
const formRef = ref<FormInstance>();
const sideOk = () => {
    formRef.value?.validate().then((err) => {
        if (!err) {
            if (pageData.sideTitle === "新增运输路线计件单价") {
                post({
                    url: "/dwPc/TransportRoutePiece/insert",
                    data: [dataForm],
                }).then((res: any) => {
                    if (res.code === 200) {
                        formRef.value?.resetFields();

                        pageData.showAdd = false;

                        Message.success({
                            content: "新增成功",
                            duration: 5000,
                        });
                        doRefresh();
                    } else {
                        Message.error({
                            content: res.message,
                            duration: 5000,
                        });
                    }

                });
            } else {
                post({
                    url: "/dwPc/TransportRoutePiece/update",
                    data: [dataForm],
                }).then((res: any) => {
                    if (res.code === 200) {
                        formRef.value?.resetFields();
                        pageData.showAdd = false;

                        Message.success({
                            content: "修改成功",
                            duration: 5000,
                        });
                        doRefresh();
                    } else {
                        Message.error({
                            content: res.message,
                            duration: 5000,
                        });
                    }

                });
            }
        }
    });
};
const deleteHandler = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;

    }
    Modal.confirm({
        title: "系统提示",
        content: "确认删除选中的数据?",
        onOk() {
            post({
                url: "/dwPc/TransportRoutePiece/delete",
                data: gridOption.value.getSelectedRows().map((o: any) => { return o.id })
            }).then(({ code, data, message }: any) => {
                if (code === 200) {
                    Message.success({
                        content: "删除成功",
                        duration: 5000,
                    });

                    pagination.page = 1
                    doRefresh();

                } else {
                    Message.error({
                        content: '删除失败',
                        duration: 5000,
                    });
                }

            });
        },
    });
};
const editHandler = (record: ClothSet) => {
    for (var key in record) {
        dataForm[key] = record[key]
    }
    pageData.sideTitle = '修改运输路线计件单价'
    pageData.showAdd = true
};



// 表格准备事件
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1
}
let tc: any[] = tableColumns.map((o) => {

    let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
        tooltipField: o.key,
    }
    if (o.slotName === 'act') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj["width"] = '80px'
        obj['cellRenderer'] = {
            template: `<el-button style="color:#165dff;" link @click="a">修改</el-button>`,
            setup(props: any) {
                const a = () => {
                    editHandler(props.params.data)
                }
                return {
                    a
                }
            }

        }
    }

    return obj
})
let a = [{
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
}]
tc = a.concat(tc)
const total = ref(10);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    pagination.page = val
    doRefresh();
}
function change1(val: any) {
    pagination.pageSize = val
    doRefresh();
}
const huiche = () => {
    doRefresh();
}
const localeText1: any = ref(localeText)


</script>
<script lang="ts">
export default {
    name: "UnitPriceSettings",
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>


